<template>
  <!-- <div id="container"></div> -->
  <div>
    <!-- 标题 -->
    <van-nav-bar title="地图找房" left-arrow @click-left="$router.back()" />
    <div id="container"></div>
  </div>
</template>

<script>
import { getMap } from '@/api/map'
import { getCity } from '@/utils/storage'

export default {
  name: 'map-page',
  data() {
    return {}
  },
  methods: {},
  async mounted() {
    const { body } = await getMap(getCity().value)
    console.log(body)

    const map = new window.BMapGL.Map('container')
    map.centerAndZoom(getCity().label + '市', 12) // 初始化地图

    body.forEach((item) => {
      const point = new window.BMapGL.Point(
        item.coord.longitude,
        item.coord.latitude
      )
      console.log(point)

      const content = item.label + '<br>' + item.count
      const label = new window.BMapGL.Label(content, {
        // 创建文本标注
        position: point, // 设置标注的地理位置
        offset: new window.BMapGL.Size(0, 0) // 设置标注的偏移量
      })
      label.setStyle({
        // 设置label的样式
        color: '#fff',
        fontSize: '14px',
        width: '60px',
        height: '60px',
        lineHeight: '30px',
        textAlign: 'center',
        backgroundColor: 'rgba(8, 175, 106, 0.8)',
        border: '2px solid #fff',
        borderRadius: '50%'
      })
      map.addOverlay(label) // 将标注添加到地图中
    })
    map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放

    console.log(getCity().label)

    console.log(body)
  }
}
</script>

<style scoped lang="less">
#container {
  height: 100vh;
  // background-color: rgba(8, 175, 106, 0.6);
}
</style>
